<script setup lang="ts">
import { ref } from 'vue';
import { jump, router, toast } from '@/utils/tools'
import { onShow } from '@dcloudio/uni-app';
import { apiAddressDel, apiAddressEdit, apiAddressList } from '@/apis/address';

const addressLists = ref([]);
// 是否默认
const isDefault = ref(false);

const handleTrash = (id: number) => {
  // toast('已删除');
  apiAddressDel({ id }).then((res: any) => {
    if (res.code == 200) {
      toast('删除成功！');
      getList();
    }
  });
}
const handleEdit = (row: any) => {
  // toast('已修改');
  router(`/pagesMy/address/add?id=${row.id}&sence=edit`);
}


const handleChoose = (row: any) => {
  uni.$emit('addressInfo', row);
  uni.navigateBack({
    delta: 1
  });
}

const handleAdd = () => {
  toast('点击了添加按钮');
  jump({ url: '/pagesMy/address/add', method: 'navigateTo' });
  // radio.value = !radio.value;
}
// 获取列表
const getList = async () => {
  let lists = await apiAddressList();
  addressLists.value = lists.data;

}
onShow(() => {
  getList();
})

</script>
<template>
  <view class="container">
    <view v-for="(item, i) in addressLists" :key="item.id">
      <view class="l-card">
        <view class="flex flex-center">
          <view class="coord margin-right-20 flex flex-center ">
            <image src="@/static/images/coord.png" mode="scaleToFill" />
          </view>
          <view class="flex flex-column " style="width: 100%;">
            <view class="realname flex flex-between">
              <view><text>姓名:</text>
                <text>{{ item.recipient }}</text>
              </view>
              <view class="tag-warning flex flex-center">
                <text>家</text>
              </view>
            </view>
            <view class="mobile">
              <text>电话:</text>
              <text>{{ item.phone }}</text>
            </view>
            <view class="address">
              <text>地址:</text>
              <text>{{ item.area + item.address }}</text>
            </view>
          </view>
        </view>
        <uv-line :customStyle="{ margin: '10rpx 0' }"></uv-line>
        <view class="flex flex-between ">
          <view class="default flex flex-align-center">
            <label class="radio" @click="handleChoose(item)">
              <!-- <radio value="r1" style="transform:scale(0.7)" />  -->
              <radio value="r1" :checked="item.state === 1" style="transform:scale(0.7)" />
              选择地址
            </label>
          </view>
          <view class="flex operate flex-align-center">
            <view class="flex flex-align-center margin-right-20" @click="handleTrash(item.id)">
              <image src="@/static/images/trash.png" class="margin-right-10" mode="scaleToFill" />
              <text>删除</text>
            </view>
            <view class="flex flex-align-center" @click="handleEdit(item)">
              <image src="@/static/images/edit.png" class="margin-right-10" mode="scaleToFill" />
              <text>编辑</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="btn-view flex flex-center" @click="handleAdd">
    <view class="flex flex-center">
      <image src="@/static/images/loupe.png" class="margin-right-10" mode="scaleToFill" />
      <button class="btn-text">
        添加收货地址
      </button>
    </view>
  </view>
  <uv-empty mode="list" text="暂无收货地址，请添加" :show="false"></uv-empty>
</template>
<style scoped lang="scss">
.l-card {
  // position: relative;
  margin-bottom: 20rpx;
}

.container {
  padding-bottom: 150rpx;
}

.btn-view {
  position: fixed;
  bottom: 0;
  background-color: #FF3F3F;
  width: 100%;
  height: 120rpx;

  .btn-text {
    color: #ffffff;
    font-size: 28rpx;

  }


  image {

    width: 36rpx;
    height: 36rpx;
  }
}

.coord {
  flex-shrink: 0;
  background: linear-gradient(0deg, rgba(191, 1, 3, 1), rgba(255, 84, 2, 1));
  border-radius: 40rpx;
  width: 80rpx;
  height: 80rpx;

  image {
    width: 50rpx;
    height: 50rpx;
  }
}

.tag-warning {
  width: 104rpx;
  background: #E7F7FF;
  border: 1px solid #91D5FF;
  border-radius: 10rpx;

  text {
    font-size: 28rpx;
    color: #2E9AFF;
  }
}

.line {
  margin: 20rpx 0;
}

.operate {
  color: #6C6C6C;
  font-size: 28rpx;

  image {
    width: 28rpx;
    height: 28rpx;
  }

}


.default {}

.tag-primary {
  width: 104rpx;
  background: #FFF2E8;
  border: 1px solid #ffbb96;
  border-radius: 10rpx;

  text {
    color: #FA561F;
  }
}


.address {
  // text-indent: -2em;
  // padding-left: 2em;
  // line-height: 1.5;
}
</style>
